<template>
  <div class="goodsdetail">
    <!-- 顶部导航 -->
    <itemnavbar />
    <!-- 轮播图 -->
    <van-swipe :autoplay="5000">
      <van-swipe-item v-for="(image, index) in images" :key="index">
        <img class="swipeitem" v-lazy="image" />
      </van-swipe-item>
    </van-swipe>
    <div class="synopsis">
      <h2>{{ name }}</h2>
      <p>
        <b>{{ subtitle }}</b>
      </p>
      <h2 class="price">¥{{ min_price }}&nbsp;-&nbsp;¥{{ max_price }}</h2>
      <p>
        <b>订购提示：{{ tips }}</b>
      </p>
    </div>
    <div class="detail">
      <img
        src="http://static.wdmcake.cn/images/upload/Image/870%EF%BC%88%E7%BB%8F%E5%85%B8%E9%BB%91%E6%A3%AE%E6%9E%97%EF%BC%89_01.png"
        alt=""
      />
      <div class="text">
        <h3>温馨提示</h3>
        <hr />
        <ol>
          <li>
            划线价说明：商品展示的划横线价格为参考价，并非原价，该价格为味多美门店标价或该商品在官网平台曾展示过的售价；由于地区、时间的差异性和市场行情波动，门店标价、展示价格可能会与您购物时展示的不一致，该价格仅供您参考。
          </li>
          <li>
            味多美官网及味多美官网商城小程序可24小时自助在线订购，当您操作不便时，您可以拨打我们的客服电话，将您想购买的商品名称、规格、数量、详细配送地址、配送时间、收货人及要求等告诉我们的客服人员，客服人员会帮您完成商品订购。客服热线电话：4001-170-170（服务时间08:00-20:00，除春节期间）
          </li>
          <li>
            目前支持在线支付宝、网银及微信支付，货到现金付款、门店现金/银联/味多美充值卡等付款方式。
          </li>
          <li>
            蛋糕价格变动以官网及门店价格为准，部分产品采用应季水果点缀，会随季节的变化有所调整，产品以实物为准。由于供货原因，全球选购的原料产地会有变化。
          </li>
          <li>
            味多美可提供蛋糕、粽子、月饼提货卡等产品的企事业单位团体订购及企业福利外包服务，期待与广大合作伙伴开放合作，咨询热线：4001-170-170（北京），021-52277820（上海）。
          </li>
        </ol>
      </div>
    </div>
    <div style="height: 50px"></div>
    <van-goods-action>
      <van-goods-action-icon icon="chat-o" text="客服" />
      <van-goods-action-icon icon="cart-o" text="购物车" />
      <van-goods-action-icon icon="star-o" text="已收藏" />
      <van-goods-action-button
        type="warning"
        text="加入购物车"
        @click="show = true"
      />
      <van-goods-action-button
        type="danger"
        text="立即购买"
        @click="show = true"
      />
    </van-goods-action>
    <van-sku
      v-model="show"
      :sku="sku"
      :quota="1"
      :goods="goods"
      :goods-id="goodsId"
      :hide-stock="true"
      :hide-quota-text="true"
      :show-soldout-sku="false"
      :disable-stepper-input="true"
      @add-cart="addCart"
    />
  </div>
</template>

<script>
import Itemnavbar from "../components/Itemnavbar.vue";
import { mapMutations } from "vuex";
import Vue from "vue";
import { Lazyload } from "vant";

Vue.use(Lazyload);
export default {
  components: { Itemnavbar },
  data() {
    return {
      attr: [],
      min_price: "168.00",
      max_price: "180.00",
      name: "元气森林",
      tips: "1、受疫情影响中高风险地区生日蛋糕暂时无法配送，带来不便请谅解!",
      subtitle: "100%使用纯正奶油",
      images: [
        "http://static.wdmcake.cn/images/202111/goods_img/2264_P_1637620932320.jpg",
      ],
      show: false,
      goodsId: 1,
      sku: {
        // 所有sku规格类目与其值的从属关系，比如商品有颜色和尺码两大类规格，颜色下面又有红色和蓝色两个规格值。
        // 可以理解为一个商品可以有多个规格类目，一个规格类目下可以有多个规格值。
        tree: [
          {
            k: "尺寸", // skuKeyName：规格类目名称
            k_s: "s1", // skuKeyStr：sku 组合列表（下方 list）中当前类目对应的 key 值，value 值会是从属于当前类目的一个规格值 id
            v: [
              // skuValueId：规格值 id skuValueName：规格值名称
              { id: "1", name: "Φ15cm" },
              { id: "2", name: "Φ18cm" },
              { id: "3", name: "Φ20cm" },
              { id: "4", name: "Φ25cm" },
              { id: "5", name: "Φ30cm" },
              { id: "6", name: "Φ35cm" },
              { id: "7", name: "Φ40cm" },
              { id: "8", name: "3层" },
              { id: "9", name: "4层" },
              { id: "10", name: "5层" },
              { id: "11", name: "6层" },
              { id: "12", name: "8层" },
            ],
            largeImageMode: false, //  是否展示大图模式
          },
          {
            k: "胚子", // skuKeyName：规格类目名称
            k_s: "s2", // skuKeyStr：sku 组合列表（下方 list）中当前类目对应的 key 值，value 值会是从属于当前类目的一个规格值 id
            v: [
              { id: "1", name: "原味蛋糕" },
              { id: "2", name: "巧克力味蛋糕" },
              { id: "3", name: "提拉米苏慕斯蛋糕" },
              { id: "4", name: "乳酪蛋糕" },
            ],
            largeImageMode: false, //  是否展示大图模式
          },
          {
            k: "夹心", // skuKeyName：规格类目名称
            k_s: "s3", // skuKeyStr：sku 组合列表（下方 list）中当前类目对应的 key 值，value 值会是从属于当前类目的一个规格值 id
            v: [
              { id: "1", name: "无水果夹心" },
              { id: "2", name: "杂果夹心" },
              { id: "3", name: "酸奶提子夹心" },
              { id: "4", name: "黑樱桃夹心" },
            ],
            largeImageMode: false, //  是否展示大图模式
          },
        ],
        // 所有 sku 的组合列表，比如红色、M 码为一个 sku 组合，红色、S 码为另一个组合
        list: [],
      },
      goods: {
        // 默认商品 sku 缩略图
        picture:
          "http://static.wdmcake.cn/images/202111/thumb_img/2264_thumb_G_1637620932795.jpg",
      },
    };
  },
  computed: {},
  props: ["goods_id"],
  methods: {
    ...mapMutations(["pushCart"]),
    getDetail() {
      let url = "/shop/detail?goods_id=" + this.goods_id;
      this.axios
        .get(url)
        .then((res) => {
          let temp = [];
          res.data.results.forEach((item, index) => {
            let goods = {
              id: item.goods_id, // skuId
              s1: item.size_id, // 规格类目 k_s 为 s1 的对应规格值 id
              s2: item.crust_id, // 规格类目 k_s 为 s2 的对应规格值 id
              s3: item.layer_id,
              price: item.price * 100, // 价格（单位分）
              stock_num: 999, // 当前 sku 组合对应的库存
            };
            temp.push(goods);
          });
          this.sku.list = temp;
        })
        .catch((err) => {
          console.error(err);
        });
    },
    addCart(skuData) {
      let select = skuData.selectedSkuComb;
      let goods = {
        id: this.goods_id,
        title: this.name,
        size_id: select.s1,
        crust_id: select.s2,
        layer_id: select.s3,
        price: select.price / 100,
        count: 1,
      };
      this.pushCart(goods);
      this.show = false;
    },
  },
  mounted() {
    this.getDetail();
  },
};
</script>

<style scoped>
.goodsdetail {
  background-color: #f5f5f5;
}
.swipeitem,
.detail > img {
  display: block;
  width: 100%;
}
.synopsis {
  margin: 5px;
  padding: 5px;
}
.synopsis > p {
  font-size: 0.8rem;
}
.synopsis :nth-child(2) {
  color: rgba(0, 0, 0, 0.5);
}
.synopsis :nth-child(3) {
  color: rgba(255, 0, 0, 1);
}
.synopsis :nth-child(4) {
  color: rgba(255, 0, 0, 0.8);
}
.text {
  padding: 0 5px;
}
.text > ol {
  list-style: decimal outside;
  text-align: justify;
  padding: 0 20px;
  padding-bottom: 20px;
}
</style>
